<!DOCTYPE html>
<html>
	<head>
		<title>regist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">员工信息管理系统</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						注册
					</h1>
					<form action="login.html" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									用户名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="user.username" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									真实姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="user.realname" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" v-model="user.password" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									性别:
								</td>
								<td valign="middle" align="left">
									男
									<input type="radio" class="inputgri"  value="男" checked="checked" v-model="user.sex" />
									女
									<input type="radio" class="inputgri"  value="女" v-model="user.sex" />
								</td>
							</tr>
							
							<tr>
								<td valign="middle" align="left">
									验证码:
								</td>
								<td>
									<input type="text" class="inputgri" v-model="code" />
								</td>
								<td valign="middle" align="right">
									<img id="num" :src="url" class="ifPic" />
									<a href="javascript:;" @click="getImg">换一张</a>
								</td>
							</tr>
						</table>
						<p>
							<input type="button" @click="register"  class="button" value="提交 &raquo;" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				com.lwj@qq.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script>
	var app = new Vue({
		el:"#wrap",
		data:{
			url:"",
			user:{
				sex:"男", //设置性别默认值
			},
			code:"",
		},
		methods:{
			//更换验证码
			getImg(){
				//加随机数：防止浏览器认为发送的请求都一样而不发送请求，导致点击换一张图片却没反应
				axios.get("http://127.0.0.1:9000/ems_vue/user/getImage?time="+Math.random()).then(res=>{  
				// console.log(res);
				this.url = res.data;
			})	
			},
			//用户注册
			register(){
				axios.post("http://127.0.0.1:9000/ems_vue/user/register?code="+this.code,this.user).then(res=>{
					console.log(res.data);
					if(res.data.state){
						alert(res.data.msg+" 点击确定后将跳转至登陆页面");
						location.href="./login.html";
					}else{
						alert(res.data.msg);
					}
				});
			},
		},
		created(){
			axios.get("http://127.0.0.1:9000/ems_vue/user/getImage?time="+Math.random()).then(res=>{
				// console.log(res);
				this.url = res.data;
			})
		},
	}); 
</script>